<template>
	<view class="good-list" :class="{'list' : layout == 'list','grid' : layout == 'grid'}">
		<view class="good-item" v-for="(item,index) in list" :key="index" @click="$util.go('pages/detail?id='+item.id,{'path':'/mall/'})">
			<view class="good-item_thumb">
				<u--image :showLoading="true" :src="item.goods_thumbs" :width="thumbWidth" :height="thumbHeight" mode="aspectFill"></u--image>
			</view>
			<view class="good-item_info">
				<view>
					<view class="good-item__title flex-start flex-align-items">
						<text>{{ item.goods_title }}</text>
						<text class="badge m-l-xs" :class="'badge-state-'+item.goods_state" v-if="item.goods_state != 1">{{ item.state_text }}</text>
					</view>
					<view class="good-item__tags">
						<text class="text-xs badge m-r-xs" :class="'type-'+item.goods_type">{{ item.type_text }}</text>
					</view>
				</view>
				<view>
					<view class="good-item__line">
						<u-line dashed></u-line>
					</view>
					<view class="good-item__footer">
						<view class="flex-between flex-warp-nowarp" style="align-items: center;">
							<view class="good-item__footer_price">
								<text class="num">{{ item.goods_integral }}</text>
								<text class="company ">{{configInfo.integral_company}}</text>
							</view>
						<!-- 	<view class="good-item__footer_price">
								<text class="num">{{ item.goods_price }}</text>
								<text class="company">{{configInfo.money_company}}</text>
							</view> -->
							<view class="good-item__footer_count">
								<text v-if="item.surplus_num > 0">{{$util.handleStr($t('goods_list.good-surplus'),item.surplus_num)}}</text>
								<text v-if="item.surplus_num <= 0" class="text-danger">已售罄</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		name:"mall-goods",
		props: ['list','layout'],
		props: {
		    list:{
				required: true
			},
		    config:{
				required: true
			},
			layout:{
				default:"list"
			},
			thumbWidth:{
				default:"100%"
			},
			thumbHeight:{
				default:"200rpx"
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	// .good-list.list .good-item{
	// 	display: flex;
	// 	align-items: flex-start;
	// }
	// .good-list{
	// 	display: flex;
	// 	flex-wrap: wrap;
	// }
	.good-list.list {
		.good-item{
			// width: 100%;
			margin-left: 4%;
			margin-right: 4%;
			display: flex;
			// align-items: flex-start;
			&_thumb{
				padding: 15rpx 0 15rpx 15rpx;
				width: 200rpx;
			}
			&_info{
				
				flex: 1;
				// margin-top: 25rpx;
				// display: flex;
				// flex-direction: column;
				// justify-content: space-between;
			}
			&__line{
			}
		}
	}
	.good-list.grid{
		display: flex;
		flex-wrap: wrap;
		margin: 0 2%;
		.good-item{
			width: 46%;
			margin-left: 2%;
			margin-right:2%;
			&__title{
				display: -webkit-box !important;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical !important
			}
			&__line::before{
				position: absolute;
				content:'';
				width: 10px;
				height: 10px;
				background-color: $bgcolor-2;
				// background-color:#000;
				border-radius: 100%;
				top: -5px;
				left:-10px;
				z-index: 1;
			}
			&__line::after{
				position: absolute;
				content:'';
				width: 10px;
				height: 10px;
				background-color: $bgcolor-2;
				// background-color:#000;
				border-radius: 100%;
				top: -5px;
				right:-10px;
				z-index: 1;
			}
		}
	}
	// .good-list.grid .good-item{
	// 	width: 44%;
	// 	margin-left: 4%;
	// 	margin-right:2%;
	// }
	.good-item.list{
		width: 100%;
		margin-left: 4%;
		margin-right: 4%;
		display: flex;
		// align-items: flex-start;
		&_thumb{
			width: 220rpx;
		}
	}
	.good-item.grid{
		width: 44%;
		margin-left: 4%;
		margin-right:2%;
	}
	.good-item{
		background-color: #fff;
		border-radius: 8px;
		margin-top: 25rpx;
		overflow: hidden;
		// position: relative;
		font-size: $contentSize;
		&__tags{
			margin-top: 15rpx;
			font-size: 18rpx;
			.badge{
				color: #333;
				border-radius: 5px;
				// border: 1px solid #eee;
				background-color: transparent;
			}
			.badge.type-1{
				color: #999;
				background-color: #eee;
			}
			.badge.type-2{
				color: #18b566;
				background-color: #dbf1e1;
			}
			.badge.fineness-1{
				color: #f29100;
				border:1px solid #fcbd7c;
			}
			.badge.fineness-2{
				color: #999;
				border:1px solid #eee;
			}
		}
		&_info{
			padding: 15rpx;
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			// flex-grow:;
		}
		&__title{
			color: $incolor-1;
			// padding: 15rpx;
			font-size: $titleSize;
			.badge.true{
				color: #fff;
				background-color: #e94055;
			}
		}
		&__line{
			position: relative;
			margin-top: 25rpx;
		}
		
		&__footer{
			margin-top: 15rpx;
			// padding: 15rpx;
			&_price{
				color: $auxcolor-3;
			}
			&_count{
				color:$incolor-2;
				font-size: $miniSize;
			}
		}
	}
	.badge-state-2{
		background-color: red;
	}
	.badge-state-3{
		color: #fff;
		background-color: #ff9900;
	}
	.badge-state-4{
		color: #fff;
		background-color: #fa3534;
	}
	.company{
		margin-left: 5rpx;
		font-size: 20rpx;
	}
</style>